<template lang="">
  <el-dialog

    title="角色分配"
    :visible="showRoleDialog"
    @open="handleOPen"
    @close="handleclose"
  >
    <!-- el-checkbox-group选中的是 当前用户所拥有的角色  需要绑定 当前用户拥有的角色-->
    <el-checkbox-group v-model="checkList" v-loading="loading">
      <!-- 选项 -->
      <el-checkbox v-for="item in roleList" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
    </el-checkbox-group>
    <!-- 提交 -->
    <template #footer>
      <div style="text-align: right">
        <el-button type="primary" @click="clickSubmit">确定</el-button>
        <el-button @click="handleclose">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import { reqGetRoleList } from '@/api/settings'
import { reqGetUserDetailById, reqAssignRoles } from '@/api/employee'
// import { Dialog } from 'element-ui'
export default {
  name: 'AssignRole',
  props: {
    showRoleDialog: {
      type: Boolean,
      default: false
    },
    userId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
    //   showdialog: false
      roleList: {},
      checkList: {},
      loading: false
    }
  },
  methods: {
    handleclose() {
      this.$emit('update:showRoleDialog', false)
      this.checkList = ''
    },
    handleOPen() {
      // loading效果 下面的这两个 ajax 是异步操作 直接加不生效
      // promise.all([promise对象1,promise对象二,...]).then(()=>{
      // 所有promise对象异步操作完成时 才调用then方法
      // })
      Promise.all([this.GetRoleList(), this.GetUserDetailById()]).then(() => {
        // loading效果结束
        this.loading = false
      })
      // 请求角色列表渲染

      // 回显
    },
    // 请求角色列表渲染
    async GetRoleList() {
      const { data: { rows }} = await reqGetRoleList(1, 100)
      this.roleList = rows
    },
    // 回显
    async  GetUserDetailById() {
      // console.log(1111111111111111)
      // console.log('assige', this.userId)
      const { data: { roleIds }} = await reqGetUserDetailById(this.userId)
      this.checkList = roleIds
    //   console.log(this.checkList)
    },
    // 更新角色
    async  clickSubmit() {
      console.log(this.userId, this.checkList)
      await reqAssignRoles(this.userId, this.checkList)
      //   console.log(data)
      this.$message.success('角色更新成功')
      this.handleclose()// 关闭 加 重置
    }
  }
}
</script>
<style >

</style>
